<template>
	<div class="main_search">
		<div>
			<van-search
				class="info_search"
				v-model="value"
				@search="onSearch"
				@clear="clearSearch"
				placeholder="搜索"
			/>
		</div>
		<van-list
			style="margin-top: 10px"
			:finished="finished"
			v-model="loading"
			finished-text="没有更多了"
			@load="onLoad"
		>
			
			<van-cell
				v-for="(item, index) in list"
				:key="index"
				style="margin-bottom: 10px"
			>
	
				<div class="warn_item" @click="goDangerDetail(item)">
							
					<div class="warn_header">
						<div>{{ item.Title }}</div>
						
					</div>
					<div class="warn_name">
						<div class="name_item">
							{{ item.Content }}
						</div>
					</div>
					<div class="warn_sort">
						<div>接受时间：{{ item.CreateDate }}</div>
						<div class="sort_item">
							<div class="item">
								<div class="mr-10">
									<span v-if="item.IsRead">已读</span>
									<span style="color:red;" v-else>未读</span>
								</div>
								<van-icon name="arrow" />
							</div>
						</div>
					</div>
				</div>
				<van-tag
							v-if="item.ExpireDays < 0"
							class="warn_tag"
							type="primary"
							>剩{{ Math.abs(item.ExpireDays) }}天
							</van-tag>
						<van-tag v-if="item.ExpireDays > 0" class="warn_tag" type="warning"
							>逾期{{ Math.abs(item.ExpireDays) }}天
							</van-tag>
			</van-cell>
		</van-list>
	</div>
</template>

<script>
import {commonMessagePageData,readMessage} from '@/api/commonMessage'
import {doMessageClick} from "@/utils/message.js";
export default {
	data() {
		return {
			loading: false,
			finished: false,
			value: '',
			list: [],
			filter: {
				page: 0,
				dataType: 'EarlyWarning',
			},
		}
	},
	created() {
		this.getList()
		if(this.$store.state.navTo == "warning"){
            this.$store.commit("setNavTo", "");
        }
	},
	methods: {
		onSearch() {
			this.filter.page = 0
			var conditions = [
				{
					Name: 'Keywords',
					DisplayName: '',
					Value: '',
					Operator: 'like',
					DataType: 'String',
				},
			]
			conditions.forEach((item) => {
				item.DisplayName = this.value
				item.Value = this.value
			})

			this.filter.conditions = JSON.stringify(conditions)
			this.getList()
		},
		clearSearch() {
			this.filter = {
				page: 0,
				dataType: 'EarlyWarning',
			}
			this.getList()
		},
		// 列表详情
		getList() {
			this.loading = true
			commonMessagePageData(this.filter).then((res) => {
				this.loading = false
				if (!res.data.HasNextPage) {
					this.finished = true
				}
				this.list = res.data.Data
				this.filter.page = res.data.PageIndex
			})
		},
		onLoad() {
			this.loading = true
			++this.filter.page
			commonMessagePageData(this.filter).then((res) => {
				this.loading = false
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
		// 隐患详情
		goDangerDetail(item) {
			if(!item.IsRead)
			{
				readMessage ({id:item.ID}).then((res) => {})
			}
			doMessageClick.call(this,item);			
		},
		onCancel() {
			Toast('')
		},
	},
}
</script>

<style lang="less" scoped>
.van-cell
{
	padding: 10px 10px 0 10px;
	    overflow: auto;
		border-radius: 5px;
}
.main_search {
	min-height: 100vh;
}
.van-cell__value--alone
{
	overflow: hidden;
    position: initial;
}
.warn_item {
	border-radius: 5px;
	position: relative;
	overflow: auto;
}
.warn_header {
	display: flex;
	justify-content: space-between;
	position: relative;
	font-size: 16px;
}
.warn_tag {
	position: absolute;
    right: 0;
    top: 0.26667rem;
    border-radius: 26.64rem 0 0 26.64rem;
    font-size: 12px;
    padding: 2px 7px;
	}
.file_img {
	img {
		height: 100px;
		width: 100%;
	}
}

.warn_name {
	display: flex;
	margin: 10px 0 0px 0;
	align-items: center;
	font-size: 14px;
	color:#666;
	.name_item {
		width: 100%;
		padding-bottom: 10px;
		padding-right: 5px;
		border-bottom: 1px solid #e8f1f8;
	}
	.tag_item {
		/*width: 58px;*/
		border-radius: 5px;
	}
}

.warn_text {
	display: flex;
	justify-content: space-between;
	margin: 10px 0;
}

.warn_sort {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color:#666;
	line-height: 28px;
	.sort_item {
		display: flex;
		.item {
			display: flex;
			align-items: center;
			span {
				color: green;
			}
			img {
				height: 15px;
				width: 15px;
				margin-right: 5px;
			}
		}
	}
}
</style>
